<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-23 18:35:30
 * @LastEditTime: 2024-06-24 02:11:24
-->
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { Setting } from '@element-plus/icons-vue';
import { props } from '../../props';
const { constants } = defineProps(props);
const list = ref(constants);
// 创建一个具有 getter 和 setter 的计算属性
const checkList = computed({
    get() {
        return list.value.filter(column => column.show).map(column => column.prop);
    },
    set(checked) {
        // 设置表格列的显示与隐藏
        list.value.forEach(column => {
            // 如果选中，则设置列显示
            if (checked.includes(column.prop)) {
                column.show = true;
            } else {
                // 如果未选中，则设置列隐藏
                column.show = false;
            }
        });
    }
});
const columnChange=()=>{}
</script>
<template>
    <el-popover :width="200" trigger="click">
        <template #reference>
            <el-button type="danger" :icon="Setting" @click.stop.prevent="columnChange" style="outline: none">{{ $t(`button.column`) }}</el-button>
        </template>
        <el-checkbox-group v-model="checkList" v-for="item in constants">
            <el-checkbox :label="item.label" :value="item.prop"></el-checkbox>
        </el-checkbox-group>
    </el-popover>
</template>
